<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<c:forEach items="${channelList}" var="value">
    <c:if test="${value.id == channelShort}">
        <c:set value="${value}" var="channel" />
    </c:if>
</c:forEach>
<style>
     i.icon{ display: inline-block; width: 20px; height: 20px; vertical-align: middle; background: no-repeat center center; }
     i.icon.icon-answer{ width: 20px; height: 20px; }
     #scrollNav.mui-segmented-control.mui-segmented-control-inverted.lime-scroll-nav .mui-control-item{
         color: #${channel.uncheck_color} !important;
     }
     #scrollNav.mui-segmented-control.mui-segmented-control-inverted.lime-scroll-nav .mui-control-item.mui-active{
         color: #${channel.check_color} !important;;
         border-bottom-color:#${channel.check_color} !important;;
     }
</style>
<!--content-list-wrap-->

<div class="content-list-wrap">
    <div class="mui-content mui-scroll-wrapper" id="contentListWrap">
        <div class="mui-scroll">
            <div class="inner-list">
                <!--content-top-banner-->
                <c:if test="${channel.is_banner == 1}">
                <div id="banner"></div>
                </c:if>
                <div id="column"></div>
                <!--/content-top-banner-->
                <div id="contentList"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tpl-slider">
    <div class="content-top-banner">
        <div class="mui-slider" id="muiSlideList">
            <div class="mui-slider-group">
                {{each resultList as value i}}
                <div class="mui-slider-item">
                    <a data-id="{{value.id}}" class="thumb"><img src="{{value.theme_img1}}"/></a>
                    <span class="tit">{{if value.is_charge == 1}}<span style="color: red;">[专享]</span>&nbsp;{{/if}}{{value.title}}</span>
                </div>
                {{/each}}
            </div>
            <div class="mui-slider-indicator">
                {{each resultList as value i}}
                <div class="mui-indicator {{if i==0}}mui-active{{/if}}"></div>
                {{/each}}
            </div>
        </div>
    </div>
</script>

<!--/content-list-wrap-->
<script type="text/html" id="tplNav">
    <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted lime-scroll-nav" id="scrollNav">
        <div class="mui-scroll" >
            {{each resultList as value i}}
            <a class="mui-control-item {{if i == 0}}mui-active{{/if}}" data-id="{{value.id}}">{{value.column_name}}</a>
            {{/each}}
        </div>
    </div>
</script>
<script type="text/html" id="tplList">
    {{each resultList.list as value}}
    <a data-id="{{value.id}}" class="list-row {{if value.theme_img3}}three-row{{/if}}">
        <div class="inner">
            <div class="item text">
                <h2>{{if value.is_charge == 1}}<span class="only">专享</span>&nbsp;{{/if}}{{value.title}}</h2>
                {{if !value.theme_img3}}
                <p class="tag">
                    <span>{{formatTime value.create_time}}</span>
                    <c:if test="${channel.is_label == 1}">
                    <span>{{value.name}}</span>
                    </c:if>
                    <c:if test="${channel.is_read == 1}">
                    <span>{{value.reading}} 阅读</span>
                    </c:if>
                    {{if value.motion}}
                    <span>情绪 <i class="icon icon-face {{value.motion}}"></i></span>
                    {{/if}}
                </p>
                {{/if}}
            </div>
            <div class="item thumb">
                {{if value.theme_img1}}
                <span class="cell"><img src="{{value.theme_img1}}" alt=""></span>
                {{/if}}
                {{if value.theme_img2}}
                <span class="cell"><img src="{{value.theme_img2}}" alt=""></span>
                {{/if}}
                {{if value.theme_img3}}
                <span class="cell"><img src="{{value.theme_img3}}" alt=""></span>
                {{/if}}
            </div>
            {{if value.theme_img3}}
            <div class="item bottom">
                <p class="tag">
                    <span>{{formatTime value.create_time}}</span>
                    <c:if test="${channel.is_label == 1}">
                    <span>{{value.name}}</span>
                    </c:if>
                    <c:if test="${channel.is_read == 1}">
                    <span>{{value.reading}} 阅读</span>
                    </c:if>
                    {{if value.motion}}
                    <span>情绪 <i class="icon icon-face {{value.motion}}"></i></span>
                    {{/if}}
                </p>
            </div>
            {{/if}}
        </div>
    </a>
    {{/each}}
</script>
<jsp:include page="nav.jsp" />
<script>
    var _textIndex = 1, column_id = 0, total_page = 0;

    //上拉加载数据
    function pullUp2Refresh() {
        var _this = this;
        //如果存在数据，则继续添加数据
        if (_textIndex < total_page) {
            $.ajax({
                url: _basePath + "/app/information/infoList",
                data: {
                    channel_id: '${channelShort}',
                    column_id: column_id,
                    type: 3,
                    curPage: _textIndex + 1
                },
                dataType: 'json',
                success: function (data) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tplList', data);
                    $("#contentList").append(_html);

                    _textIndex++;

                    //如果存在数据，则继续添加数据
                    if (_textIndex < total_page) {
                        _this.endPullupToRefresh(false);
                    } else {
                        _this.endPullupToRefresh(true);
                    }
                }
            });

        } else {
            _this.endPullupToRefresh(true);
        }

    }

    //加载栏目资讯
    function loadInfoData() {
        $("#contentList").html("");
        //跳转页面
        $.ajax({
            url: _basePath + "/app/information/infoList",
            data: {
                channel_id: '${channelShort}',
                column_id: column_id,
                type: 3,
                curPage: 1
            },
            dataType: 'json',
            success: function (data) {
                if(undefined != typeof data.resultList && data.resCode == 0) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tplList', data);
                    $("#contentList").append(_html);
                    initPullUp();
                    $("#contentList").on("tap", "a", function () {
                        mui.openWindow({
                            url: "<%=basePath%>app/page?pv=info_detail&id=" + $(this).data("id")
                        })
                    });
                }else {
                    mui.toast(data['message'])
                }
            }
        });
    }

    //加载栏目数据
    function loadNav() {
        var _nav = $('#column');
        $.ajax({
            url: _basePath + "/app/channel/columnList",
            data: {
                channelId: ${channelShort}
            },
            dataType: 'json',
            success: function (data) {
                if(undefined != typeof data.resultList && data.resCode == 0) {
                    var _html = template('tplNav', data);
                    _nav.append(_html);
                    if(_nav.find("a.mui-control-item:first-child").length > 0){
                        column_id = _nav.find("a.mui-control-item:first-child").data("id");
                    }
                    mui('#scrollNav').scroll();
                    loadInfoData();
                }else {
                    mui.toast(data['message'])
                }
            }
        });

        //栏目列表事件
        _nav.on("tap", "a", function () {
            column_id = $(this).data("id");
            loadInfoData();
        });
    }

    //加载banner图
    function loadBannerList() {
        $.ajax({
            url: _basePath + "/app/information/infoList",
            data: {
                channel_id: ${channelShort},
                type: 2
            },
            dataType: 'json',
            success: function (data) {
                if(undefined != typeof data.resultList && data.resCode == 0) {
                    shareWx(window.location.href,"${channel.channel_img_url}","${channel.share_title}","${channel.share_desc}");
                    var _html = template('tpl-slider', data);
                    $("#banner").append(_html);
                    mui('#muiSlideList').slider();
                    $("#banner").on("tap", "a", function () {
                        mui.openWindow({
                            url: "<%=basePath%>app/page?pv=info_detail&id=" + $(this).data("id")
                        })
                    });
                }else {
                    mui.toast(data['message'])
                }
            }
        });
    }

    $(function () {

        loadNav();
        loadBannerList();
    });

    function initPullUp() {
        //初始化上拉加载
        mui.init({
            pullRefresh: {
                container: 'div#contentListWrap',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                up: {
                    height: 50,//可选.默认50.触发上拉加载拖动距离
                    auto: false,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '我是有底线的',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: pullUp2Refresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });
    }
</script>
